<template>
	<view>
	<scroll-view style="height: 100vh;" scroll-y="true">
		<view class="problem">
			<view class="problem-title">
				发起抽奖
			</view>
			<view class="problem-item" v-for="(item,index) in start_draw" :key="index">
				<view class="ask" @click="openinfo(item.id)">
					<view class="ask-title">
						<view class="icon">Q</view>
						<text>{{item.title}}</text>
					</view>
					<text :class="['goto',hoverIndex==item.id?'rotatein':'rotateout']">›</text>
				</view>
				<view class="answer" :class="[hoverIndex==item.id?'showtext':'hiddentext']">
					<view class="icon">A</view>
					<text>{{item.answer}}</text>
				</view>
			</view>
		</view>

		<view class="problem">
			<view class="problem-title">
				参与抽奖
			</view>
			<view class="problem-item" v-for="(item,index) in participate_draw" :key="index">
				<view class="ask" @click="openinfo(item.id)">
					<view class="ask-title">
						<view class="icon">Q</view>
						<text>{{item.title}}</text>
					</view>
					<text :class="['goto',hoverIndex==item.id?'rotatein':'rotateout']">›</text>
				</view>
				<view class="answer" :class="[hoverIndex==item.id?'showtext':'hiddentext']">
					<view class="icon">A</view>
					<text>{{item.answer}}</text>
				</view>
			</view>
		</view>

	</scroll-view>
		<!--加载遮罩-->
		<loadingpage v-if="globelloading"></loadingpage>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globelloading: true,
				asks: 10,
				hoverIndex: 0,
				deg: -90,
				start_draw: '',
				participate_draw: '',
				listdata:{},//监听获取数据改变
			}
		},
		onLoad() {
			this.getinfo();
		},
		watch:{
			listdata(){
				this.globelloading = false
			}
		},
		methods: {
			//展开
			openinfo(articleId) {
				this.hoverIndex = this.hoverIndex == articleId ? '' : articleId;
			},
			getinfo() {
				this.$HttRequest({
					url: '/common_problem/lists',
					param: ''
				}, ).then(res => {
					console.log(res);
					if (res.status === 10000) {
						this.listdata = res.data
						this.start_draw = res.data.start_draw;
						this.participate_draw = res.data.participate_draw;
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch(error => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			}

		}
	}
</script>


<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.problem {
		font-size: 26rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;

		.problem-title {
			color: #666666;
			font-size: 26rpx;
			height: 80rpx;
			width: 50%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-left: 20rpx;

		}

		.problem-item {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;
			background-color: #FFFFFF;
			width: 100%;

			.ask {
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx solid #f0f0f0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;

				.goto {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					transform: rotate(90deg);
					font-size: 50rpx;
					color: #8d8d8d;
					transition: all .2s ease-in-out;
				}

				.rotatein {
					transform: rotate(-90deg);
					color: #3e3e3e;
				}

				.rotateout {
					transform: rotate(90deg);
					color: #8d8d8d;
				}

				.ask-title {
					display: flex;

					.icon {
						font-size: 24rpx;
						margin: 0 20rpx;
						color: #fff;
						width: 35rpx;
						height: 35rpx;
						display: flex;
						border-radius: 50%;
						justify-content: center;
						align-items: center;
						background-color: $uni-botton-primary;
						font-weight: bold;
					}
				}

			}

			.answer {
				padding: 0 20rpx;
				width: 100%;
				border-bottom: 1rpx solid #f0f0f0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #8d8d8d;
				visibility: hidden;
				opacity: 0;
				transition: all .2s ease-in-out;
				height: 0;
				text {
					width: 80%;
					margin: 20rpx 0;
				}

				.icon {
					font-size: 24rpx;
					margin: 0 20rpx;
					color: #fff;
					width: 35rpx;
					height: 35rpx;
					display: flex;
					border-radius: 50%;
					justify-content: center;
					align-items: center;
					background-color: #4bd19d;
					font-weight: bold;
				}
			}
			.showtext{
				visibility: visible;
				opacity: 1;
				height: 165rpx;
			}
			.hiddentext{
				visibility: hidden;
				opacity: 0;
				height: 0;
			}
		}

	}
</style>
